<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input customStyle="height:100%;width: 90%;margin: auto;" placeholderStyle="color: #fff;"
              placeholder="搜索供应商" border="none" color="#fff" shape="circle" v-model="search" @confirm="searchChange">
              <clIcon slot="prefix" type="icon-sousuo_o" color="#fff" size="25"></clIcon>
            </u--input>
          </view>

          <view class="flex flex-sa f-35" v-if="page_type !== 'procure'">
            <view class="f-35">
              <view class="flex flex-c f-35"> 总欠款 </view>
              <view class="flex flex-c f-30 m-b-20"> 3 </view>
            </view>
            <view class="f-35">
              <view class="flex flex-c f-35"> 总人数 </view>
              <view class="flex flex-c f-30 m-b-20"> 3 </view>
            </view>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="u-page" :class="page_type !== 'procure' ? 'm-t-240' : ''">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item v-for="(item, index) in indexList" :key="index">
          <liu-swipe-action ref="liuSwipeAction" :index="index" @clickItem="liuClickItem">
            <u-cell :title="item.name" @click="to(item)">
              <u-avatar slot="icon" :text="getName(item.name)" fontSize="18" randomBgColor></u-avatar>
              <text slot="right-icon">累欠:<text class="c-red m-l-10">{{ item.currentDebt }}</text></text>
            </u-cell>
          </liu-swipe-action>
        </u-list-item>
      </u-list>
    </view>

    <!-- 筛选弹框 侧边栏 -->
    <u-popup class="sidebar" :show="show" mode="right" overlayOpacity="0.3" @close="close" @open="open">
      <view class="pop-view p-t-332">
        <view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1;" @click="toCategory">
              <view class="title">
                类别
              </view>
              <view class="value" v-if="sideObj.catName">
                {{ sideObj.catName }}
              </view>
            </view>
            <view class="icon">
              <u-icon name="close" color="#999" size="20" v-if="sideObj.catName" @click="() => {
                sideObj.catName = null; sideObj.catId = null;
              }"></u-icon>
              <u-icon name="arrow-right" color="#999" v-else></u-icon>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1;" @click="toShop">
              <view class="title">
                门店
              </view>
              <view class="value" v-if="sideObj.shop">
              </view>
            </view>
            <view class="icon">
              <u-icon name="close" color="#999" size="20" v-if="sideObj.shop" @click="sideObj.shop = ''"></u-icon>
              <u-icon name="arrow-right" color="#999" v-else></u-icon>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1;" @click="toShop">
              <view class="title">
                标签
              </view>
              <view class="value" v-if="sideObj.shop">
              </view>
            </view>
            <view class="icon">
              <u-icon name="close" color="#999" size="20" v-if="sideObj.shop" @click="sideObj.shop = ''"></u-icon>
              <u-icon name="arrow-right" color="#999" v-else></u-icon>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1;">
              <view class="title">
                显示停用
              </view>
              <view class="value">
                <u-switch v-model="sideObj.isEnable" size="18"></u-switch>
              </view>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1;">
              <view class="title">
                隐藏0欠款
              </view>
              <view class="value">
                <u-switch v-model="sideObj.inventory" size="18"></u-switch>
              </view>
            </view>
          </view>
        </view>
        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
          <u-button text="重置" shape="circle" class="reset m-r-10" @click="() => {
            show = false
          }"></u-button>
          <u-button text="搜索" shape="circle"
            color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
            @click="onSearch"></u-button>
        </view>
      </view>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { getStringOne } from '@/utils/util.js'
import { getlist, addData, delectData } from "@/apis/bill/information/supplier";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      search: null,
      indexList: [],
      pages: {
        current: 1,
        size: 20,
      },
      config: {
        title: "供应商",
        color: "#ffffff",
        navigateBack: 1, // 返回的页面数  默认为1 返回上级  2返回上2级  3返回上3级
        // backTabPage:'', // 跳转到tab传这个参数
        // backPage:'', // 跳转到其他页面传这个参数
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
          {
            key: "btn2",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      // 页面类型
      page_type: '',
      // 页面来源
      page_source: '',
      show: false,
      sideObj: {
        catId: null,
        catName: null,
        isEnable: true,
        keywords: ''
      }
    };
  },
  computed: {},
  onLoad(opt) {
    // type = cgd 采购单 
    // page == page 采购单
    this.initData();
    this.page_source = opt.page;
    this.page_type = opt.type;
    uni.$on('on-supplier-category', data => {
      this.sideObj.catName = data.name;
      this.sideObj.catId = data.id;
    })
  },
  beforeDestroy() {
    uni.$off('on-supplier-category')
  },
  onShow() {
    // this.initData();
  },
  methods: {
    // 侧拉框
    liuClickItem(item) {
      // 编辑
      if (item.id == 1) {
        this.$refs.liuSwipeAction[item.index].reset()
        this.$Router.push({
          path: "/pages/application/pages/personnel/supplier/supplier-details/supplier-details",
          query: {
            id: item.id
          }
        });
      } else if (item.id == 2) {
        // 删除
        this.$refs.liuSwipeAction[item.index].reset()
        this.deleteByIdQuarterData(this.indexList[item.index].id, item.index)
      }
    },
    //删除
    deleteByIdQuarterData(id, index) {
      let _this = this
      uni.showModal({
        title: '提示',
        content: '您确认要删除【' + this.indexList[index].name + '】吗?',
        success: function (res) {
          if (res.confirm) {
            delectData([id]).then((res) => {
              console.log(res);
              if (!res.flag) {
                _this.$refs.uToast.show({
                  type: 'error',
                  title: '',
                  message: res.message,
                })
                return;
              }
              _this.$refs.uToast.show({
                type: 'success',
                title: '',
                message: "删除成功",
              })
              _this.indexList.splice(index, 1)
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    // 跳转类别
    toCategory() {
      uni.navigateTo({
        url: '/pages/application/pages/personnel/components/supplier-category'
      })
    },
    // 跳转门店
    toShop() {
      uni.navigateTo({
        url: '/pages/selects/shop/index'
      })
    },
    // 侧边栏
    close() {
      this.show = false
    },
    open() {

    },
    // 搜索
    onSearch() {
      this.pages.current = 1
      this.indexList = []
      this.show = false
      this.initData()
    },
    scrolltolower(e) {
      this.pages.current++;
      this.initData();
      // 到底了
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      let _this = this;
      let billId = {
        data: _this.sideObj,
        page: {
          current: _this.pages.current,
          size: _this.pages.size,
          sort: "",
          order: "desc",
          total: 0,
          orders: [
            {
              column: "create_time",
              asc: false,
            },
          ],
        },
      };
      getlist(billId).then((res) => {
        // console.log('res', res)
        if (!res.flag) return;
        const data = res.data || {};
        if (this.pages.current == 1) {
          this.indexList = data.records;
        } else {
          this.indexList = [...data.records, ...this.indexList];
        }
      });
    },
    getName(name) {
      return getStringOne(name);
    },
    searchChange() {
      this.indexList = [];
      this.pages.current = 1;
      this.initData();
    },
    to(item) {
      // 收款单选择逻辑
      if (this.page_type == 'skd') {
        uni.$emit("pushCustomDetails", item)
        this.$Router.back()
      } else if (this.page_type == 'cgd') {
        // 以后的采购单信息都存在cgdInformation里面
        // 进入到这先清除调之前的信息 因为这可能返回键返回来的
        this.$ls.remove('cgdInformation')
        // 初始化数据结构
        const data = {
          supplier: item, // 供应商数据
          productInformation: [], // 产品数据 { warehouse 仓库信息 , product : 产品信息}
        }
        this.$ls.set('cgdInformation', data)
        uni.navigateTo({
          url: `/pages/application/pages/cloth/customer-product/index?id=${item.id}&name=${item.name}&source=${this.page_source}&type=${this.page_type}`
        })
      } else if (this.page_type == 'cgdreturn') {
        // 以后的采购单信息都存在cgdInformation里面
        // 进入到这先清除调之前的信息 因为这可能返回键返回来的
        this.$ls.remove('cgdreturnInformation')
        // 初始化数据结构
        const data = {
          supplier: item, // 供应商数据
          productInformation: [], // 产品数据 { warehouse 仓库信息 , product : 产品信息}
        }
        this.$ls.set('cgdreturnInformation', data)
        uni.navigateTo({
          url: `/pages/application/pages/cloth/customer-product/index?id=${item.id}&name=${item.name}&source=${this.page_source}&type=${this.page_type}`
        })
      } else if (this.page_type == 'thjs') {
        uni.$emit("settlementComego", item)
        this.$Router.back()
      } else {
        this.$Router.push({
          path: "/pages/application/pages/personnel/supplier/supplier-details/supplier-details",
          query: {
            id: item.id
          }
        });
      }
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.$Router.push({
          name: "personnelSupplierDetails",
        });
      } else if (item.key === "btn2") {
        this.show = true
        // this.productPopShow = !this.productPopShow;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
</style>
